<template>
	<view class="container">
		<view class="card d fd as">
			<span class="c1">核销码&nbsp;MC151-4545-4545</span>
			<span class="c2">车辆奔驰FWE4/豫A98FH</span>
			<span class="c1">服务内容</span>
			<view class="serverContent d fd jb">
				<view class="c3 d jb">
					<span>车辆清洗</span>
					<span>￥100</span>
				</view>
				<view class="c3 d jb">
					<span>车辆清洗附加费</span>
					<span>￥10</span>
				</view>
			</view>
			<span class="c1">订单信息</span>
			<view class="order d fd jb">
				<view class="c3 d jb">
					<span>原价</span>
					<span>￥100</span>
				</view>
				<view class="c3 d jb">
					<span>优惠</span>
					<span>￥10</span>
				</view>
				<view class="c3 d jb">
					<span>实付金额</span>
					<span>￥90</span>
				</view>
				<view class="c3 d jb">
					<span>订单编号</span>
					<span>12212121212</span>
				</view>
				<view class="c3 d jb">
					<span>预约时间</span>
					<span>2023-02-66 19:19:49</span>
				</view>
				<view class="c3 d jb">
					<span>支付时间</span>
					<span>2023-02-66 19:19:49</span>
				</view>
				<view class="c3 d jb">
					<span>核销时间</span>
					<span>{{ time }}</span>
				</view>
			</view>
		</view>
		<button class="bt d jc ac" :style="{backgroundColor:bg}" @click="confirmVerification">确认核销</button>
	
	</view>
</template>

<script setup>
import { ref } from 'vue';
let bg=ref('')
let time = ref('');
function confirmVerification() {
	uni.showModal({
		title: '核销此订单',
		content: '请您仔细核对订单，此操作不可撒销请谨慎操作！',
		success: function (res) {
			if (res.confirm) {
				console.log('用户点击确定');
				time.value='2020-66-66 14:44'
				bg.value='#808080'
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});
}

</script>

<style lang="scss" scoped>
.container {
	width: 100vw;
	height: 100vh;
	/* 使用线性渐变设置背景，前 50% 为蓝色，后 50% 为透明 */
	background-image: linear-gradient(to bottom, #3284fc 20%, #33ff5700 20%);
	display: flex;
	flex-direction: column;
	align-items: center;
	.card {
		width: 80%;
		height: 60%;
		padding: 4% 5%;
		background-color: white;
		.c1 {
			font-size: 40rpx;
			margin-top: 3%;
		}
		.c2 {
			font-size: 25rpx;
			width: 100%;
			border-bottom: 5rpx solid #b6b6b650;
			padding: 3% 0;
		}
		.serverContent {
			width: 100%;

			font-size: 25rpx;
			margin: 3% 0;
			height: 8%;
			// background-color: #33ff57;
			padding-bottom: 5%;
			border-bottom: 5rpx solid #a7a7a750;
			.c3 {
				width: 100%;
			}
		}
		.order {
			margin-top: 5%;
			height: 50%;
			width: 100%;
			font-size: 25rpx;
		}
	}
	.bt {
		width: 80%;
		height: 5%;
		border-radius: 50rpx;
		border: 0;
		background-color: #0662e6;
		color: white;
		margin-top: 10%;
	}
}

</style>
